<template>
	<!-- 盲盒红包列表 -->
	<view class="">
		<shopro-login-modal></shopro-login-modal>
		
		<view class="page">
			<view class="trumpetBox">
				<u-notice-bar bg-color="#ffe7e4" mode="horizontal" style="width: 100%; border-radius: 34rpx;" :list="newsArr"></u-notice-bar>
				<!-- <text>恭喜 张三的**获得69个石榴籽</text> -->
			</view>
			<view class="arr">
				<view class="arrItem" v-for="(item,index) in activeArr" :key="index">
					<view class="title">
						{{item.title}}
					</view>
					<view class="content">
						<view class="cover">
							<image :src="item.thumb" mode=""></image>
							<!-- <view class="contentItem">
								<view class="getItem">
									<view class="text">
										领
									</view>
								</view>
							</view> -->
						</view>
						<view class="descArr">
							<view class="descItem">
								<image src="../../../static/images/index/submitIcon.png" mode=""></image>
								<text>商家补贴红包￥{{item.allowance}}</text>
							</view>
							<view class="descItem">
								<image src="../../../static/images/index/submitIcon.png" mode=""></image>
								<text>中奖可获得{{item.slz_nums}}个石榴籽</text>
							</view>
							<view class="descItem">
								<image src="../../../static/images/index/submitIcon.png" mode=""></image>
								<text>中奖可获得{{item.slg_nums}}个石榴果</text>
							</view>
							<view class="descItem">
								<image src="../../../static/images/index/submitIcon.png" mode=""></image>
								<text>参与可获得{{item.coupon.name}}优惠券</text>
							</view>
						</view>
				
						
					</view>
					<view class="bottomBox">
						<view class="price">
						￥<text>{{item.activity_amount}}</text>
						</view>
						<view class="btn" @click="junit('/pages/index/mangHeBox/detail', {id: item.id})">
							去领红包
						</view>
					</view>
				</view>
				
			</view>
		</view>
	
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				activeArr:[],
				newsArr:[],
			};
		},
		methods:{
			getList(){
				this.myHttp({
					data:{
						route : 'plugin.blind-box.frontend.activity.index',
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.activeArr = res.data.data
					}
				})
			},
			getNews(){
				this.myHttp({
					data:{
						route : 'plugin.blind-box.frontend.user.winners',
					}
				}).then((res)=>{
					if(res.result== '1' && res.data.data.length){
						this.newsArr = []
						 res.data.data.forEach(item=>{
							 let str = `恭喜${item.member.username}获得${item.allowance}红包，${item.win_slz_nums}个石榴籽，${item.win_slg_nums}个石榴果！`
							 this.newsArr.push(str)
						 })
						// this.newsArr = res.data.data
						// console.log(this.newsArr);
					}
				})
			},
			
		},
		onLoad(){
			this.getList()
			this.getNews()
		},
		components:{
			
		},
		filters:{
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #F9F9F9;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	.trumpetBox{
		width: 692rpx;
		height: 68rpx;
		margin-top: 20rpx;
		background: #FFE7E4;
		border-radius: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 23rpx;
		image{
			width: 46rpx;
			height: 36rpx;
		}
		text{
			color: #FF5214;
			margin-left: 18rpx;
		}
	}
	
	.arr{
		display: flex;
		flex-direction: column;
		
		.arrItem{
			margin-top: 15rpx;
			width: 693rpx;
			height: 357rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 33rpx 28rpx;
			display: flex;
			flex-direction: column;
			.title{
				font-size: 33rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.content{
				flex: 1;
				display: flex;
				align-items: center;
				.cover{
					width: 161rpx;
					height: 161rpx;
					background: #FFEBE3;
					border-radius: 20rpx;
					margin-right: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 161rpx;
						height: 161rpx;
					}
					.contentItem{
						width: 114rpx;
						height: 128rpx;
						background-color: #E96650;
						// margin: 36rpx 13rpx 0;
						border-radius: 12rpx;
						position: relative;
						overflow: hidden;
					}
					.getItem{
						&:after{
							content: '';
							position: absolute;
							top: -120%;
							left: 50%;
							transform: translateX(-50%);
							box-shadow: 0 14rpx 12rpx rgba(0, 0, 0, 0.3);
							width: 205rpx;
							height: 205rpx;
							border-radius: 50%;
							background-color: transparentize;
							border: 2rpx solid #F0A863;
							z-index: 5;
						}
						.text{
							position: absolute;
							left: 50%;
							margin-top: 30rpx;
							transform: translateX(-50%);
							width: 50rpx;
							height: 50rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 500;
							font-size: 30rpx;
							background-color: #FBCC81;
							color: #EA3506;
							border-radius: 50%;
							z-index: 10;
						}
					}
				}
				.descArr{
					display: flex;
					flex-direction: column;
					height: 100%;
					padding: 20rpx 0;
					.descItem{
						display: flex;
						align-items: center;
						
						image{
							width: 40rpx;
							height: 40rpx;
							margin-right: 20rpx;
						}
						text{
							font-size: 24rpx;
							color: #A9A9A9;
						}
					}
				}
				
			}
			.bottomBox{
				display: flex;
				justify-content: space-between;
				.price{
					font-size: 36rpx;
					font-family: PingFang SC;
					color: #FF581C;
					text{
						font-weight: bold;
						margin-left: 15rpx;
					}
				}
				.btn{
					width: 183rpx;
					height: 64rpx;
					background: #F45C12;
					border-radius: 32rpx;
					display: grid;
					place-items: center;
					font-size: 26rpx;
					color: #fff;
				}
			}
			
		}
	}
	
}
</style>
